<template>
	<view class="register">
		<view class="verify">
			<text class="text">注册</text>
			<view class="logininput">
				<view class="item">
					<view class="box">
						<image src="../../punlic/image/code.png" mode=""></image>
					</view>
					<input class="uni-input" focus v-model="userInfo.email" placeholder="邮箱" />
				</view>
			</view>
			<view class="logininput">
				<view class="item_code">
					<view class="box">
						<image src="../../punlic/image/mailbox.png" mode=""></image>
					</view>
					<input class="uni-input" v-model="userInfo.code" placeholder="输入验证码" />

					<view class="line"></view>
					<!-- 倒计时 -->
					<view class="countdown" v-if="isShowCountdown">
						{{countdown}}S
					</view>
					<view class="sendCode" @click="sendCode" v-else>
						{{msgText}}
					</view>
				</view>
			</view>
			<view class="logininput">
				<view class="item">
					<view class="box">
						<image src="../../punlic/image/password.png" mode=""></image>
					</view>
					<input class="uni-input" password placeholder="输入密码" v-model="userInfo.password" maxlength="6" />
				</view>
			</view>
			<view class="logininput">
				<view class="item">
					<view class="box">
						<image src="../../punlic/image/password.png" mode=""></image>
					</view>
					<input class="uni-input" password placeholder="输入密码" v-model="nextPassword" maxlength="6" />
				</view>
			</view>
			<view class="btn" @click="register">注册</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, toRefs } from 'vue'
	import {
		UserRegist,
		toSendCode
	} from '@/api/User.js'

	interface User {
		email : string,
		code : string,
		password : string
	}
	let userInfo = reactive<User>({
		email: '',
		code: '',
		password: ''
	})
	let nextPassword = ref<string>('');

	const verifyRule = () : boolean => {
		let emailReg : RegExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
		let { email, password, code } = toRefs(userInfo);
		if (email.value == "" || !emailReg.test(email.value)) {
			uni.showToast({
				title: "请输入正确的邮箱",
				icon: 'none',
				duration: 2000
			})
			return false;
		}
		if (code.value == "") {
			uni.showToast({
				title: "请输入验证码",
				icon: 'none',
				duration: 2000
			})
			return false;
		}
		if (password.value == "") {
			uni.showToast({
				title: "请输入密码",
				icon: 'none',
				duration: 2000
			})
			return false;
		}
		if (password.value !== nextPassword.value) {
			uni.showToast({
				title: "两次密码输入不一致",
				icon: 'none',
				duration: 2000
			})
			return false;
		}
		return true;
	}

	const register = async () => {
		if (verifyRule()) {
			let { email, password, code } = toRefs(userInfo);
			let res : any = await UserRegist({ email: email.value, password: password.value, code: code.value });
			if (res.code == 200) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}

	// 倒计时
	let countdown = ref<number>(60),
		msgText = ref<string>('发送验证码'),
		isShowCountdown = ref<boolean>(false);
	let intervalId = null;
	// 发送验证码
	const sendCode = async () => {
		let { email } = toRefs(userInfo);
		isShowCountdown.value = true;
		intervalId = setInterval(updateCountdown, 1000);
		try{
			let res : any = await toSendCode({ email: email.value });
			if (res.code == 200) {
				uni.showToast({
					title: "验证码已发送",
					duration: 2000
				})
			}
		}catch(e){
			clearInterval(intervalId);
			isShowCountdown.value = false;
			msgText.value = "重新获取";
			countdown.value = 60;
		}
	}
	// 倒计时代码
	function updateCountdown() {
		// 如果count大于0，则减少一秒
		if (countdown.value > 0) {
			countdown.value--;
		} else {
			// 如果count等于0，停止倒计时
			clearInterval(intervalId);
			isShowCountdown.value = false;
			msgText.value = "重新获取";
		}
	}
</script>

<style lang="less" scoped>
	.register {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #FFEFEF 0%, #FFFDFD 100%);

		.verify {
			position: absolute;
			top: 15%;
			width: 100%;
			padding: 40rpx;

			.text {
				font-size: 44rpx;
				font-weight: 600;
			}

			.logininput {
				.item {
					display: flex;
					align-items: center;
					margin-top: 40rpx;

					.box,
					input {
						background: #fff;
					}

					.box {
						width: 70rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 12rpx 0 0 12rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					input {
						width: 595rpx;
						height: 100rpx;
						padding-left: 20rpx;
						font-size: 30rpx;
						opacity: 0.5;

					}



				}

				.item_code {
					margin-top: 40rpx;
					width: 100%;
					height: 100rpx;
					background: #fff;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					padding-right: 20rpx;

					.uni-input {
						flex: 1;
					}

					.line {}

					.countdown {
						color: #666;
						font-family: "HarmonyOS Sans SC";
						font-size: 30rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 1;
						display: flex;
						align-items: center;
						font-weight: 500;

						&::before {
							content: "";
							display: inline-block;
							border-left: 2rpx solid #666;
							height: 30rpx;
							margin-right: 20rpx;
						}
					}

					.box {
						width: 70rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 12rpx 0 0 12rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}

					}

					input {
						padding-left: 20rpx;
						font-size: 30rpx;
						opacity: 0.5;
					}

					.sendCode {
						font-size: 26rpx;
						color: #E5353F;
					}
				}
			}



			.btn {
				color: #fff;
				height: 96rpx;
				border-radius: 25rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 665rpx;
				background: #E5353F;
				margin-top: 80rpx;
			}
		}

	}
</style>